<!doctype html>
<html lang="en">
	<head>
		<title>Tween.js / hello world (JS modules)!</title>
		<link href="./style.css" rel="stylesheet" />

		<style>
			#target {
				position: absolute;
				transform-style: preserve-3d;
				transform: translate3d(100px, 100px, 0.0001px) rotateY(10deg);
				width: 100px;
				height: 100px;
				background: #a0dde9;
				padding: 1em;
			}
		</style>

		<!-- Use an import map to tell the browser where to find the package
		named "@tweenjs/tween.js" when a JS module import statement imports
		`from '@tweenjs/tween.js'`. See the import statement in ./index.js. -->
		<script type="importmap">
			{
				"imports": {
					"@tweenjs/tween.js": "./node_modules/@tweenjs/tween.js/dist/tween.esm.js"
				}
			}
		</script>
	</head>
	<body>
		<div id="info">
			<h1><a href="http://github.com/tweenjs/tween.js">tween.js</a></h1>
			<h2>00 _ hello world (using native JS modules)</h2>
			<p>Simple example for illustrating the creation and chaining of tweens.</p>
		</div>

		<div id="target">hello world!</div>

		<!-- ./index.js is generated from ./index.ts -->
		<script type="module" src="./index.js"></script>
	</body>
</html>
